<template>
  <section class="wrapper">
    <el-col :span="24" class="action-bar">
      <el-input v-model="input" class="action-bar-input" placeholder="请输入设备号"></el-input>
      <el-select
        v-model="vip_rule_id"
        placeholder="设备运行状态"
        style="margin-right:20px"
      >
        <el-option label="正常" value="1"></el-option>
        <el-option label="异常" value="0"></el-option>
        <el-option label="" value="">所有</el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="onSearch">检索</el-button>
      <el-button type="primary" size="medium" @click="addSumit">添加</el-button>
    </el-col>
    <div class="el-checkbox">
      <el-checkbox v-model="showList.all" label="全选" @change="allCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.runtime" label="运行时长" @change="itemCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.version" label="运行版本号" @change="itemCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.remarks" label="备注" @change="itemCheckBox"></el-checkbox>
    </div>

    <!--列表-->
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" min-width="20" sortable></el-table-column>
      <el-table-column prop="device_num"  label="设备号" sortable></el-table-column>
      <el-table-column prop="name" label="设备名称" sortable></el-table-column>
      <el-table-column label="设备地址" min-width="150" sortable>
        <template slot-scope="scope">
          <p>{{scope.row.province+scope.row.city+scope.row.area+scope.row.info}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at"  label="投放时间" sortable></el-table-column>
      <el-table-column prop="address_detail"  label="运行状态" sortable>
        <template slot-scope="scope">
          <p>{{scope.row.operating_status==1?"正常":"异常"}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="running_time" label="运行时长" sortable v-if="showList.runtime"></el-table-column>
      <el-table-column prop="running_version_num" label="运行版本号" sortable v-if="showList.version"></el-table-column>
      <el-table-column prop="desc" label="备注" min-width="150" sortable v-if="showList.remarks"></el-table-column>
      <el-table-column label="操作"width="200">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="deviceSet(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delDevice(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-col>
    <!-- 新增 -->
    <el-dialog title="添加/编辑设备" :visible.sync="addFormVisible" width="50%">
      <el-form label-width="110px" label-position="left">
        <el-form-item label="设备编号">
          <el-input v-model="addForm.device_num"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="设备账号">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="设备密码">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="设备地址">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
          ></el-cascader>
          <el-input type="textarea" v-model="addForm.info" style="margin-top: 10px"></el-input>
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select v-model="addForm.operating_status" placeholder="运行状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运行时长" style="width: 200px">
          <el-input v-model="addForm.running_time" type="number"></el-input>
        </el-form-item>
        <el-form-item label="运行版本号">
          <el-input v-model="addForm.running_version_num"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.desc" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click="setDevice">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
  import { regionDataPlus,CodeToText,TextToCode } from 'element-china-area-data';
  export default {
  name: "machine",
  data() {
    return {
      addFormVisible:false,
      input:'',
      showList: {
        remarks: false,
        runtime: false,
        version: false,
        all: false
      },
      vip_rule_id: '',
      activityList: [],
      addForm:{},
      page: 1,
      total: 0,
      pagesize: 10,
      options: regionDataPlus,
      selectedOptions: []
    };
  },
  mounted(){
    this.getDeviceList();
  },
  methods:{
    //获取设备列表
    async getDeviceList(){
      let params = {
        page: this.page,
        limit: this.pagesize,
        device_keyword: this.input,
        operating_status: this.vip_rule_id
      }
      const res = await this.$api.deviceList(params);
      if (res.data.level == 'success'){
        this.activityList = res.data.data;
        this.total = res.data.page_info.total;
      }else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //设置设备
    async setDevice(){
      this.addForm.province =  CodeToText[this.selectedOptions[0]];
      this.addForm.city = CodeToText[this.selectedOptions[1]];
      this.addForm.area = CodeToText[this.selectedOptions[2]];
      let params = this.addForm;
      const res = await this.$api.setDevice(params);
      if (res.data.level == 'success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.getDeviceList();
        this.addFormVisible = false;
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //获取设备详情
    async deviceSet(id){
      let params = {
        id : id
      }
      const res = await this.$api.deviceSet(params);
      if (res.data.level == 'success'){
        this.addForm = res.data.data;
        this.selectedOptions[0] = TextToCode[res.data.data.province].code;
        this.selectedOptions[1] = TextToCode[res.data.data.province][res.data.data.city].code;
        this.selectedOptions[2] = TextToCode[res.data.data.province][res.data.data.city][res.data.data.area].code;
        this.addFormVisible = true;
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //删除设备
    async delDevice(id){
      let params = {
        id : id
      }
      const res = await this.$api.delDevice(params);
      if (res.data.level == 'success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.getDeviceList();
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    currentChange(e){
      this.page = e;
      this.getDeviceList();
    },
    addSumit(){
      this.addForm = {};
      this.selectedOptions = [];
      this.addFormVisible = true;
    },
    //检索
    onSearch(){
      this.getDeviceList();
    },
    //全选
    allCheckBox(){
      if (this.showList.all){
        this.showList.remarks = true;
        this.showList.version = true;
        this.showList.runtime = true;
      }else {
        this.showList.remarks = false;
        this.showList.version = false;
        this.showList.runtime = false;
      }
    },
    itemCheckBox(){
      if (this.showList.runtime&&this.showList.version&&this.showList.remarks){
        this.showList.all = true;
      }else {
        this.showList.all = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
